<template>
  <view class="home">
    <view class="bill-box u-flex">
      <u-image width="80rpx" height="80rpx"
        :src="bill.in_out == 1?'/static/images/icon_zhi.png':'/static/images/icon_zhi.png'" shape="circle"></u-image>
      <view class="u-m-l-20 u-flex-y-center u-flex-1">
        <u-text :text="bill.type_title" size="32rpx" color="#333" bold></u-text>
        <u-text :text="`${bill.in_out == 1?'+':'-'}${bill.money}`" size="32rpx" color="#333" bold
          align="right"></u-text>
      </view>
    </view>
    <view class="bill-box u-p-b-30">
      <u-text text="详细信息" color="#333" size="32rpx" bold margin="20rpx 0"></u-text>
      <view class="u-flex-y-center u-flex-1 u-p-b-30">
        <u-text text="创建时间" size="28rpx" color="#333"></u-text>
        <u-text :text="bill.account_time" size="28rpx" color="#333" align="right"></u-text>
      </view>
      <view class=" u-flex-y-center u-flex-1 u-p-b-30">
        <u-text text="支付账户" size="28rpx" color="#333"></u-text>
        <u-text :text="bill.account" size="28rpx" color="#333" align="right"></u-text>
      </view>
      <view class="u-p-b-30">
        <u-text text="支付图片" size="28rpx" color="#333" margin="0 0 30rpx"></u-text>
        <view class="u-flex-y-center u-flex-wrap">
          <u-image :src="prefixURL(item)" v-for="(item,index) in bill.images" :key="index" width="120rpx"
            height="120rpx" border-radius="20" class="u-m-r-20"></u-image>
        </view>
      </view>
      <u-text text="备注" size="28rpx" color="#333" margin="0 0 30rpx"></u-text>
      <u-text :text="bill.desc||'暂无备注~'" size="28rpx" color="#333"></u-text>
    </view>
    <view class="action-bar u-flex-y-center u-flex-between u-p-10 u-p-l-30 u-p-r-30">
      <u-button type="warning" @click="_auditLog">审核</u-button>
      <u-button type="primary" customStyle="margin-left:40rpx" @click="_auditLog(2)">打款</u-button>
    </view>
  </view>
</template>

<script setup>
  import {
    onMounted,
    ref
  } from 'vue';
  import {
    auditLog,
    logInfo
  } from '../../config/api';
  import { prefixURL } from '../../util/util';
  const props = defineProps({
    id: ''
  })
  const bill = ref({})
  onMounted(() => {
    _logInfo()
  })
  const _logInfo = () => {
    logInfo({
      log_id: props.id
    }).then(res => {
      bill.value = res.data
      bill.value.images = bill.value.images.split(',')
    })
  }
  const _auditLog = (value) => {
    if (value == 2) {
      uni.$u.toast('正在开发中')
      return
    }
    auditLog({ log_id: props.id }).then(res => {
      console.log(res)
    })
  }
</script>

<style scoped lang="scss">
  .home {
    padding: 20rpx;
    min-height: 100vh;
    background: #f5f5f5;
  }

  .bill-box {
    padding: 20rpx;
    background: #fff;
    border-radius: 20rpx;
    margin-bottom: 20rpx;
  }

  .action-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding-bottom: env(safe-area-into-bottom);
    background: #fff;
  }
</style>